<template>
  <div class="nav">
    <!-- 导航栏 -->
    <van-nav-bar title="账户及自动扣费设置" @click-left="$router.push('/home/mine')">
      <template #left>
        <van-icon name="arrow-left" size="25" />
      </template>
    </van-nav-bar>
    <!-- <van-divider 
  :style="{ color: '#1989fa', borderColor: '#1989fa', }" /> -->
    <van-cell-group>
      <div class="class2">
        <van-cell class="class1" title="支付账户优先使用顺序设置">
          <span class="span00">拖动</span>
        </van-cell>
      </div>
      <van-divider :style="{ color: '#000;', borderColor: '#000;' }" />
      <van-cell title="预付费" value="内容" label="">
        <van-icon name="wap-nav" size="22" color="rgba(200, 200, 200)" />
      </van-cell>
      <span class="span1"
        >先付后退，充电结束后将自动完成扣费，剩余金额原路退回</span
      >
      <van-divider :style="{ color: '#000;', borderColor: '#000;' }" />

      <van-cell title="个人账户" value="内容" label="">
        <van-icon name="wap-nav" size="22" color="rgba(200, 200, 200)" />
      </van-cell>
      <span class="span1"
        >余额不足时将无法启动充电,充电结束后24小时内完成扣费</span
      >
      <van-divider :style="{ color: '#000;', borderColor: '#000;' }" />
    </van-cell-group>
    <!-- 使用  插槽来自定义右侧图标 -->
    <div class="icon">
      <van-cell
        title="微信支付分 | 免充值"
        is-link
        value=""
        icon="wechat"
        label=""
      >
        <span class="li">立即开通</span>
      </van-cell>
    </div>
    <span class="span1"
      >无感支付，先充后付，充电结束后微信支付分将自动完成扣费</span
    >
    <van-divider :style="{ color: '#000;', borderColor: '#000;' }" />
    <van-cell
      title="芝麻先享 | 先充后付"
      is-link
      value=""
      icon="alipay"
      label=""
    >
      <span class="li">立即开通</span>
    </van-cell>
    <span class="span1"
      >无感支付，先充后付，充电结束后芝麻先享将自动完成扣费</span
    >
    <van-divider :style="{ color: '#000;', borderColor: '#000;' }" />

    <div class="span2">
      <span>自动扣费设置</span>
    </div>
    <van-divider :style="{ color: '#000;', borderColor: '#000;' }" />

    <van-cell center title="优先使用优惠券" icon="question-o">
      <template #right-icon>
        <van-switch v-model="checked" size="22" />
        <van-divider :style="{ color: '#000;', borderColor: '#000;' }" />
      </template>
      <van-divider :style="{ color: '#000;', borderColor: '#000;' }" />
    </van-cell>

    <span class="span1">订单金额大于{{ now }}时使用优惠券</span>
    <div class="span0" v-if="checked">
      <van-button
        value="now"
        class="button"
        @click="now = item"
        :class="{ active: item == now }"
        v-for="(item, i) in items"
        :key="i"
        type="default"
        >{{ item }}</van-button
      >
    </div>

    <div class="span3"></div>
    <div>自定义扣费顺序</div>
    <span class="span1">订单超过24小时不支付,系统将按以下顺序自动扣费</span>
    <van-divider :style="{ color: '#000;', borderColor: '#000;' }" />
    <van-cell title="" value="" label="">
      <span>拖动</span>
    </van-cell>
    <van-divider :style="{ color: '#000;', borderColor: '#000;' }" />
    <van-cell title="代金券" value="内容" label="">
      <van-icon name="wap-nav" size="22" color="rgba(200, 200, 200)" />
    </van-cell>
    <van-divider :style="{ color: '#000;', borderColor: '#000;' }" />
    <van-cell title="账户余额" value="内容" label="">
      <van-icon name="wap-nav" size="22" color="rgba(200, 200, 200)" />
    </van-cell>
    <van-divider :style="{ color: '#000;', borderColor: '#000;' }" />
    <div class="span4"></div>
  </div>
</template>

<script>
export default {
  methods: {
    //导航
    onClickLeft() {
      Toast();
    },

    //当点击时，上发文字为按钮的值*10
  },

  data() {
    return {
      now: "1元",
      items: ["1元", "5元", "10元", "20元"],
      checked: true,
    };
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  /* background-color: rgba(240, 239, 244);  */
}
.nav {
  margin: 0 15px;
}
::v-deep .van-nav-bar .van-icon {
  color: rgba(140, 140, 140);
}
.van-cell {
  margin-top: 10px 0;
}
.van-cell__value {
  font-size: 10px;
  /* color: rgba(75, 186, 197); */
}
::v-deep .van-cell__label {
  flex-wrap: wrap;
}
.van-divider {
  color: rgba(40, 44, 52);
  margin: 10px 0;
}
.span0 {
  display: flex;
  justify-content: space-around;

  font-size: 12px;
  margin-top: 10px;
  z-index: 3;
}

.span1 {
  color: rgba(184, 184, 184);
  font-size: 12px;
  top: 10px;
}
.span2 {
  height: 80px;
  background-color: rgba(240, 239, 244);
  display: flex;
  align-items: flex-end;
}
.span2 > span {
  flex-direction: column;
  top: 20px;
  margin: 10px;
  color: rgba(139, 138, 143);
}
.span3 {
  height: 20px;
  background-color: rgba(240, 239, 244);
}
.span4 {
  height: 120px;
  background-color: rgba(240, 239, 244);
}
.class1 {
  height: 35px;
  background-color: rgba(240, 239, 244);
  padding: 5px 0;
}
.btn {
  display: flex;
  justify-content: space-around;
}
.van-button {
  width: 70px;
  color: #000;
}
.van-button--default .van-button--normal :active {
  /* border: 1px solid #e8e8e8; */
  color: red;
}
.li {
  color: rgba(31, 182, 206);
}
.span00 {
  display: flex;
  justify-content: end;
  margin: 0 5px;
  padding-bottom: -10px;
}
.button.active {
  background-color: #f0fbfd;
  color: #1ec0d5;
  border-radius: 6px;
}
</style>
